<!--
 * @Descripttion:
 * @version:
 * @Author: Connor
 * @Date: 2021-04-07 19:27:24
 * @LastEditors: Connor
 * @LastEditTime: 2021-06-30 12:25:22
-->
<template>
  <el-container class="m-container">
    <el-header class="m-header" height="50px" style="line-height:50px">
      <el-row>
        <el-col :span="2" sytle="float:left">
          <!-- <el-button v-if="userId !==1" size="mini" class="left-btn" type="primary">新增消息</el-button> -->
          <el-button
            v-if="userId !== 1"
            size="mini"
            class="left-btn"
            @click="bacthUpdateStatus()"
            type="primary"
            >批量标记已读</el-button
          >
          <span>&nbsp;</span>
        </el-col>

        <el-col :span="22">
          <el-form ref="queryForm" :model="queryForm" class="query-form">
            <el-select
              v-model="queryForm.sender"
              size="mini"
              filterable
              clearable
              placeholder="请选择发件人"
              :style="{}"
            >
              <el-option
                v-for="(item, value) in userMap"
                :key="value"
                :label="item"
                :value="value"
              />
            </el-select>
            <el-select
              v-model="queryForm.receiver"
              size="mini"
              filterable
              clearable
              placeholder="请选择收件人"
              :style="{}"
            >
              <el-option
                v-for="(item, value) in userMap"
                :key="value"
                :label="item"
                :value="value"
              />
            </el-select>
            <el-date-picker
              type="daterange"
              size="mini"
              v-model="queryForm.messageDateRange"
              value-format="yyyy-MM-dd"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            ></el-date-picker>
            <el-input
              size="mini"
              class="query-form-item"
              v-model="queryForm.message"
              placeholder="消息内容"
            ></el-input>
            <el-select
              size="mini"
              class="query-form-item"
              v-model="queryForm.status"
              filterable
              clearable
              placeholder="消息状态"
            >
              <el-option
                v-for="(item, value) in statusMap"
                :key="value"
                :label="item"
                :value="value"
              >
              </el-option>
            </el-select>
            <el-select
              size="mini"
              class="query-form-item"
              v-model="queryForm.urgencytype"
              filterable
              clearable
              placeholder="紧急类型"
            >
              <el-option
                v-for="(item, value) in urgencyTypeMap"
                :key="value"
                :label="item"
                :value="value"
              >
              </el-option>
            </el-select>
            <el-button-group>
              <el-button
                size="mini"
                class="left-btn"
                type="primary"
                icon="el-icon-search"
                @click="querydata()"
                >搜索</el-button
              >
              <el-button size="mini" class="right-btn" @click="resetData()"
                >重置</el-button
              >
            </el-button-group>
          </el-form>
        </el-col>
      </el-row>
    </el-header>
    <el-main class="m-main">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        size="mini"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          fixed
          prop="messageTypeName"
          label="消息类型"
          v-if="userId === 1"
          width="120"
        >
        </el-table-column>
        <el-table-column fixed prop="senderName" label="发件人" width="120">
        </el-table-column>
        <el-table-column
          prop="senderTypeName"
          v-if="userId === 1"
          label="发件人类型"
          width="120"
        >
        </el-table-column>
        <el-table-column prop="receiverName" label="接收人" width="120">
        </el-table-column>
        <el-table-column
          prop="receiverTypeName"
          v-if="userId === 1"
          label="接收人类型"
          width="120"
        >
        </el-table-column>
        <el-table-column label="消息内容">
          <template slot-scope="scope">
            <div class="message-link-div" v-html="scope.row.message"></div>
          </template>
        </el-table-column>
        <el-table-column prop="statusName" label="状态" width="80">
        </el-table-column>
        <el-table-column prop="urgencyTypeName" label="紧急类型" width="80">
        </el-table-column>
        <el-table-column prop="cdate" label="创建时间" width="150">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              v-if="
                scope.row.mgtTargetPath != null && scope.row.mgtTargetPath != ''
              "
              @click="openUrl(scope.row)"
              type="text"
              size="small"
              >查看详情</el-button
            >
            <el-button
              type="text"
              v-if="userId !== 1 && scope.row.status == 0"
              size="small"
              @click="oneUpdateStatus(scope.row)"
              >标记已读</el-button
            >
            <!-- <el-button type="text" v-if="userId !==1" size="small" @click="updateReceiver(scope.row)">转发</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer class="m-footer" height="45px">
      <el-row>
        <el-col :span="22">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20, 50, 100, 300, 500]"
            :page-size="20"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            style="padding-top: 10px;"
          >
          </el-pagination>
        </el-col>
        <el-col :span="2"></el-col>
      </el-row>
    </el-footer>
  </el-container>
</template>
<script>
import { ajax } from "@/store/yg/common/utils";
import { m } from "@/store/yg/common/local";
import * as constant from "@/store/yg/common/constant";

export default {
  components: {},
  props: [],
  data() {
    return {
      currentPage: 1,
      pageSize: 20,
      total: 0,
      multipleSelection: [],
      queryForm: {
        message: "",
        status: "0",
        urgencytype: "",
        sender: "",
        receiver: "",
        messageDateRange: []
      },
      statusMap: {
        0: "未读",
        1: "已读"
      },
      urgencyTypeMap: { "0": "红色", "1": "黄色", "2": "灰色" },
      tableData: [],
      userId: 1,
      userMap: {}
    };
  },
  watch: {
    "$store.state.blank.messageType": {
      handler(nval, oldVal) {
        this.queryForm.urgencytype = nval + "";
        this.querydata();
      }
    }
  },
  mounted() {
    this.queryForm.urgencytype = this.$route.query.type;
    this.querydata();
    this.userId = parseInt(this.$store.state.auth.user.id);
  },
  methods: {
    async querydata() {
      this.queryForm["currentPage"] = this.currentPage;
      this.queryForm["pageSize"] = this.pageSize;
      this.queryForm.userId = this.$store.state.auth.user.id;
      const data = await ajax("pageList", this.queryForm);
      //console.log(data);
      if (data.error) {
        this.$message.error(data.error);
      }
      var list = data.data;
      this.userMap = data.userMap;
      if (list.length > 0) {
        list.forEach(element => {
          element.statusName = this.statusMap[element.status];
          element.urgencyTypeName = this.urgencyTypeMap[element.urgencytype];
          element.messageTypeName = data.messageTypeMap[element.messageType];
          if (element.senderType == 0) {
            //erp用户
            element.senderName = data.userMap[element.senderId];
            element.senderTypeName = "ERP用户";
          } else if (element.senderType == 1) {
            //客户
            element.senderName = data.customerMap[element.senderId];
            element.senderTypeName = "客户";
          } else {
            //系统
            element.senderName = "系统";
          }
          if (element.receiverType == 0) {
            //erp用户
            element.receiverName = data.userMap[element.receiverId];
            element.receiverTypeName = "ERP用户";
          } else {
            //客户
            element.receiverName = data.customerMap[element.receiverId];
            element.receiverTypeName = "客户";
          }
        });
      }
      this.tableData = list;
      this.total = data.count;
    },
    resetData() {
      this.queryForm = {
        message: "",
        status: "",
        urgencytype: ""
      };
      this.currentPage = 1;
      this.pageSize = 20;
      this.querydata();
    },
    handleSizeChange(val) {
      //console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.querydata();
    },
    handleCurrentChange(val) {
      //console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.querydata();
    },
    handleSelectionChange(rows) {
      var list = [];
      if (rows.length > 0) {
        rows.forEach(data => {
          if (data.status == 0) {
            list.push(data);
          }
        });
      }
      this.multipleSelection = list;
      //console.log(this.multipleSelection);
    },
    async openUrl(row) {
      if (row.mgtTargetPath == "" || row.mgtTargetPath == null) {
        this.$notify.error({
          title: "错误",
          message: "该信息没有详情可查"
        });
        return false;
      }
      window.open("#" + row.mgtTargetPath);
    },
    oneUpdateStatus(row) {
      this.updateStatus([row]);
    },
    bacthUpdateStatus() {
      if (this.multipleSelection.length == 0) {
        this.$notify.error({
          title: "错误",
          message: "请选择数据"
        });
        return false;
      }
      this.updateStatus(this.multipleSelection);
    },
    async updateStatus(param) {
      const data = await ajax("updateStatus", param);
      if (data.code == 200) {
        this.$notify.success({ title: "正确", message: "标记成功" });
        this.querydata();
      }
    },
    updateReceiver(row) {}
  }
};
</script>
<style>
.el-container {
  background-color: rgb(233, 238, 243);
  padding: 0;
  margin: 0;
}
.m-header,
.m-footer {
  box-sizing: border-box;
  flex-shrink: 0;
  padding: 0px 20px;
  font-size: 12px;
  text-align: left;
  padding: 0;
  margin: 0;
}
.m-main {
  background-color: #fff;
  padding: 0;
  margin: 0;
}
.left-btn {
  color: rgb(255, 255, 255);
  background-color: rgb(42, 144, 188);
  border-color: rgb(42, 144, 188);
}
.right-btn {
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
}
.query-form {
  text-align: right;
}
.query-form-item {
  width: 120px;
}
.message-link-div,
.message-link-div pre {
  display: inline-block;
  line-height: 20px;
  overflow: auto;
  white-space: break-spaces;
  word-break: break-word;
  text-align: left;
}
.message-link-div a {
  color: blue;
}
.message-link-div a:hover {
  text-decoration: underline;
}
</style>
